<template>
  <div class="my">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="deng">
          <div class="head_portrait">
            <img :src="require('../assets/img/iv_wode_ren.png')" alt="" v-if="!vip" />
            <img :src="require('../assets/img/iv_wode_ren_vip.png')" alt="" v-if="vip" />
            <div class="vip2">
              <img :src="require('../assets/img/ic_mine_vip2.png')" alt="" 
              v-if="!vip" />
               <img :src="require('../assets/img/ic_mine_vip2_liang.png')" alt="" v-if="vip" />
            </div>
          </div>

          <router-link to="/login?go=/my" tag="a" class="login" v-if="!flag">
            <div class="dengbtn">登录 · 注册</div>
          </router-link>

          <div class="user" v-if="flag">
            <p class="username">{{ this.username }}</p>
            <p class="openvip" v-if="!vip">立即开通会员</p>
            <p class="openvip" v-if="vip">你已经是会员啦</p>
          </div>
        </div>
      </div>
      <!-- 头部 end  -->

      <!-- 分类 star  -->
      <div class="type">
        <ul>
          <router-link tag="li" to="/member?hop=/my">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_huiyuan.png')" alt="" />
              </div>
              <p>会员中心</p>
            </div>
            <div class="not">
              <p v-if="!vip">未开通</p>
              <p v-if="vip">已开通</p>
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <li>
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_xieyi.png')" alt="" />
              </div>
              <p>联系客服</p>
            </div>
            <div class="not">
              <p class="qq">QQ:22744833158</p>
              <p class="copy">复制</p>
            </div>
          </li>
          <!-- <li>
                    <div class="img">
                        <div class="imger"><img :src="require('../assets/img/ic_fenxiang_new.png')" alt=""></div>
                        <p>我的分享</p>
                    </div>
                    <div class="not">
                        <div class="jiantou">
                            <img :src="require('../assets/img/ic_jiantou.png')" alt="">
                        </div>
                    </div>
                </li> -->
          <li @click="download">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_xiazai_new.png')" alt="" />
              </div>
              <p>我的下载</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </li>
          <router-link tag="li" to="/collection?rou=/my">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_shoucan.png')" alt="" />
              </div>
              <p>我的收藏</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <router-link tag="li" to="/playHistory?rou=/my">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_lishi_png.png')" alt="" />
              </div>
              <p>收听历史</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <router-link tag="li" to="/aboutMy" >
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_guanyu.png')" alt="" />
              </div>
              <p>关于我们</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
            
          </router-link>
          <router-link tag="li" to="/help">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_banzhu.png')" alt="" />
              </div>
              <p>帮助文档</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <router-link tag="li" to="/agreement">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_xieyi.png')" alt="" />
              </div>
              <p>用户协议</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <router-link tag="li" to="/privacy">
            <div class="img">
              <div class="imger">
                <img :src="require('../assets/img/ic_yinsi.png')" alt="" />
              </div>
              <p>隐私政策</p>
            </div>
            <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div>
          </router-link>
          <li class="last" v-if="flag">
            <div class="img">
              <van-cell is-link @click="showPopup">
              <div class="imger">
                <img :src="require('../assets/img/ic_zhuxiao.png')" alt="" />
              </div>
                退出登录
                </van-cell>
              <van-popup v-model="show">
                <h1>提示</h1>
                <p>是否退出登录?</p>
                <div class="dip">
                  <button @click="cancel">取消</button>
                  <button @click="determine">确定</button>
                </div>
              </van-popup>
            </div>
            <!-- <div class="not">
              <div class="jiantou">
                <img :src="require('../assets/img/ic_jiantou.png')" alt="" />
              </div>
            </div> -->
          </li>
        </ul>
      </div>
      <!-- 分类 end  -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      username: "",
      show: false,
      vip:false || window.localStorage.getItem("vip"),

    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    determine() {//退出登录
      window.localStorage.removeItem("token");
      window.localStorage.removeItem("userId");
      this.show = false;
      this.flag = false;
    },
    download(){
      this.$emit("download")
      this.$router.push("/down");
    }
  },
  created() {
    // 接收路由传参，参数是路由命名，页面返回时跳转的路由
    //   this.username=this.$route.query.username;
    let token = window.localStorage.getItem("token");
    if (token) {//判断是否存在token，不存在显示登录，存在显示用户信息
      this.flag = true;
      this.username = token;
    } else {
      this.flag = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.my {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 20px;

    .van-popup {
      width: 260px;
      height: 150px;
      padding: 20px;
      h1 {
        margin: 0;
      }
      p {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
      }
      .dip {
        display: flex;
        height: 80px;
        justify-content: flex-end;
        align-items: flex-end;
        button {
          height: 30px;
          color: rgb(243, 21, 43);
          margin-left: 30px;
          border: 0;
          background-color: transparent;
        }
      }
    }
    .header {
      background: url(../assets/img/ic_top_bg.png) 0 no-repeat;
      width: 100%;
      background-size: 100%;
      .deng {
        display: flex;
        align-items: center;
        padding: 73px 0 35px 0;
        margin-left: 10px;
        .head_portrait {
          width: 15.5%;
          position: relative;
          img {
            width: 100%;
          }
        }
        .vip2 {
          width: 20px;
          position: absolute;
          bottom: 0px;
          right: 0px;
          img {
            width: 100%;
          }
        }
        .login {
          color: rgb(0, 0, 0);
        }
        .user {
          margin-left: 10px;
          text-align: center;
          .username {
            font-size: 18px;
          }
          .openvip {
            color: #eec94f;
          }
        }
        .dengbtn {
          font-size: 10px;
          margin-left: 10px;
          width: 92px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 14px;
          background-image: linear-gradient(90deg, #ffac0e, #fdc516);
        }
      }
    }
    /* .type{} */
    .type {
      ul {
        padding: 0 20px 85px 10px;
        li {
          display: flex;
          height: 55px;
          font-size: 13px;
          align-items: center;
          justify-content: space-between;
          .img {
            display: flex;
          }
        }
        .last{
          .img{
            width: 100%;
          }
        }
      }
      .imger {
        width: 20px;
        height: 20px;
        padding-right: 16px;
        img {
          width: 100%;
        }
      }
      .not {
        display: flex;
        .jiantou {
          img {
            padding-left: 10px;
            width: 10px;
          }
        }
        p {
          &.qq {
            color: #999;
          }
          &.copy {
            color: #ec7fa6;
            padding-left: 20px;
          }
        }
      }
    }
    .van-cell{
      padding: 0;
      width: 100%;
    }
    .van-cell__value{
      display: flex;
    }
    .van-cell__right-icon{
      font-size: 22px;
      margin-right: -5px;
    }
  }
}
</style>